<template>
	<view class="add-list u-p-30">
		<u-form :model="form" ref="uForm" label-width="200">
			<u-form-item label="收货人姓名" prop="name" required>
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="收货手机" prop="phone" required>
				<u-input v-model="form.phone" />
			</u-form-item>
			<u-form-item label="选择城市" prop="province" required>
				<city-select v-model="value" @city-change="cityChange"></city-select>
				<view class="u-demo-result-line" @click="value = true">
					{{form.province ? `${form.province}-${form.city}-${form.county}` : '选择城市'}}</view>
			</u-form-item>
			<u-form-item label="收货详细地址" prop="address" required>
				<u-input v-model="form.address" />
			</u-form-item>
			<u-form-item label="默认状态">
				<u-switch slot="right" v-model="isDefault"></u-switch>
			</u-form-item>
			<u-button @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	import citySelect from './u-city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				form: {
					name: '',
					address: '',
					phone: '',
					province: '',
					city: '',
					county: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入收货人姓名',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入收货详细地址',
						trigger: ['change', 'blur']
					}],
					phone: [{
							required: true,
							message: '请输入收货人手机',
							trigger: ['blur']
						},
						{
							validator: (rule, val, cb) => {
								return this.$u.test.mobile(val, );
							},
							message: '手机号码格式错误，手机号码11位数字',
							trigger: ['blur']
						}
					],
					province: [{
						required: true,
						message: '请选择城市',
						trigger: ['change', 'blur']
					}],
				},
				value: false,
				cityList: '选择城市',
				isDefault: false,
				addId: ''
			}
		},
		watch: {
			form: {
				handler () {
					this.isDefault = this.form.is_default === 0 ? false : true;
				}
			},
			isDefault(val) {
				this.form.is_default = val ? 1 : 0;
				console.log(val)
			}
		},

		methods: {
			/**
			 * 选择城市
			 */
			cityChange(e) {
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.county = e.area.label
				this.cityList = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			/**
			 * 提交表单验证
			 */
			submit() {
				// console.log('表单', this.form)
				this.$refs.uForm.validate(async v => {
					if (v && !this.addId) {
						await this.$u.api.addList(this.form)
						this.$u.toast('新建地址成功');
						setTimeout(() => {
							this.$u.route('pages/cart/add')
						}, 1000)
					} else if (v && this.addId) {
						await this.$u.api.updateAdd(this.addId, this.form)
						this.$u.toast('更新地址成功');
						console.log('有id了', this.form)
					}
				})
				// this.$u.api.addList(this.form)
			},
			/**
			 * 获取地址详情
			 */
			async getAddDetail(id) {
				console.log('获取id', id);
				const res = await this.$u.api.getAddDetail(id);
				this.form = res
				if (res.is_default) this.isDefault = true
			}
		},
		onLoad(options) {
			console.log(this.options, options, options.id)
			this.addId = options.id;
			if (this.addId) this.getAddDetail(this.addId)
			const page = getCurrentPages();
			console.log(page)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.add-list {}
</style>
